<template>
	<div id="grade">
		<ul class="list-group">
		    <li class="list-group-item">年级名称 
		    	<input class="mustInput" type="text" placeholder="请填写年级名称" v-model="gradeEdit.name" />
		    </li>
		</ul>
		<!--添加人员-->
	    <div class="panel panel-default">
	        <div class="panel-body">
	            <ul class="list-group">
	            	<!--添加年级组长-->
	            	<router-link :to="{ name: 'addPerson' ,params: {role: 5,'gradeId':gradeEdit.grade_id} }">
		                <li class="list-group-item xiaozhang" style="border-bottom: none;">
		                	<img src="../assets/grade_zuzhang.png"/> 添加年级组长
							<ul class="list-group">
								<div v-for="(item,key) in personnelArray" :key="key">
									<template v-if="item.role == 5 && item.grade_id == gradeEdit.grade_id">
										<router-link :to="{ name: 'edit' , params: {index: key }}">
											<li class="list-group-item second" >{{ item.name }}
					                            <span class="pull-right required">
					                                <img  src="../assets/write.png"/>
					                            </span>
											</li>
										</router-link>
									</template>
								</div>
		                    </ul>
		                </li>
	                </router-link>
	                <!--添加年级组长end-->
	                <!--添加学科备课组长-->
	                <router-link :to="{ name: 'addPerson' ,params: {role: 4,'gradeId':gradeEdit.grade_id} }">
		                <li class="list-group-item xiaozhang zuzhang">
		                	<img src="../assets/subject_zuzhang.png"/> 添加学科备课组长
							<ul class="list-group">
								<div v-for="(item,key) in personnelArray" :key="key">
									<template v-if="item.role == 4 && item.grade_id == gradeEdit.grade_id">
										<router-link :to="{ name: 'edit' , params: {index: key }}">
											<li class="list-group-item second">{{ item.name }}
												<span class="pull-right required">
													<img src="../assets/write.png"/>
												</span>
											</li>
										</router-link>
									</template>
								</div>
							</ul>
		                </li>
	                </router-link>
	                <!--添加学科备课组长end-->
	            </ul>
	        </div>
	    </div>
	    <!--添加人员end-->
	    <ul class="list-group">
		    <li class="list-group-item">晚自习
		    	<span class="pull-right required">
		    		<label class="switch-btn circle-style">
						<input class="checked-switch" type="checkbox" v-model="gradeEdit.self_study" />
						<span class="text-switch"></span> 
						<span class="toggle-btn"></span> 
					</label> 
		    	</span>
		    </li>
		    <li class="list-group-item">放假周期
				<input class="mustInput" type="text" style="width: 64%;" placeholder="请填写放假周期" v-model="gradeEdit.cycle" />
		    </li>
		    
		</ul>
		<!--添加班级-->
		<div class="panel panel-default">
        	<div class="panel-heading"></div>
	        <div class="panel-body">
	            <ul class="list-group">
	                <router-link :to="{ name: 'classAdd' ,params: { 'gradeId': gradeEdit.grade_id}}">
		                <li class="list-group-item xiaozhang" style="border-bottom: none;">
		                	<img src="../assets/class.png"/> 添加班级
	                        <ul class="list-group">
								<div v-for="(item,key) in classArray" :key="key">
                                    <template v-if="item.grade_id == gradeEdit.grade_id">
                                        <router-link :to="{ name: 'classEdit' , params: {index: key }}">
                                            <li class="list-group-item second">{{ item.name }}
                                                <span class="pull-right required">
                                                    <img src="../assets/write.png"/>
                                                </span>
                                            </li>
                                        </router-link>
                                    </template>
								</div>
							</ul>
		                </li>
                       </router-link>
	            </ul>
	        </div>
	    </div>
		<!--添加班级end-->
		<!--按钮-->
        <button type="button" @click="del()" class="btn btn-primary btn-lg btn-block del">删除</button>
        <button type="button" @click="add(gradeEdit,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
		<!--按钮end-->
	</div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'grade',
  computed: {
      personnelArray () {
          return this.$store.state.system.personnelArray
      },
      gradeArray () {
          return this.$store.state.system.gradeArray
      },
      classArray () {
          return this.$store.state.system.classArray
      },
      gradeEdit () {
          return this.$store.state.system.gradeEdit
      },
      gradeNumber () {
          return this.$store.state.system.gradeNumber
      }
  },
  created () {
      this.init()  //初始化
  },
  watch: {
      '$route': 'init'
  },
  methods:{
    init() {
//      console.log(this.$store.state.system.gradeArray[this.$route.params.index])
      this.$store.state.system.gradeEdit = this.$store.state.system.gradeArray[this.$route.params.index]
    },
    add(param,status) {
        let row = this.checkData(param)
        if(row.status == 1)
        {
            layer.open(row.msg);
            return false;
        }
        this.$store.state.system.gradeArray[this.$route.params.index] = param
        layer.open(row.msg);
        this.empty()//添加成功数据清空
        if(status == 1) {
            this.$router.go(-1)
        }
    },
  	del() {
        //删除班级 classArray
        for(var i = 0; i < this.$store.state.system.classArray.length; i++){
            if(this.$store.state.system.gradeEdit.grade_id == this.$store.state.system.classArray[i].grade_id)
            {
                this.$store.state.system.classArray.splice(i, 1)
            }
        }
        //删除人员  personnelArray
        for(var i = 0; i < this.$store.state.system.personnelArray.length; i++){
            if(this.$store.state.system.gradeEdit.grade_id == this.$store.state.system.personnelArray[i].grade_id)
            {
                this.$store.state.system.personnelArray.splice(i, 1)
            }
        }
        //删除年级gradeArray
        for(var i = 0; i < this.$store.state.system.gradeArray.length; i++){
            if(this.$store.state.system.gradeEdit.grade_id == this.$store.state.system.gradeArray[i].grade_id)
            {
                this.$store.state.system.gradeArray.splice(i, 1)
            }
        }
//      console.log('删除完成，返回上一页')
        this.$router.go(-1)
    },
  	empty() {  //清空数据
        this.$store.state.system.gradeEdit = {
            school_id: null,//学校ID
            grade_id: 1,//年级ID
            name: '',//年级名称
            total_grade: '',//总班数
            total_number: '',//总人数
            cycle: '',//放假周期
            subject:'',
            revision:'',//选科总复习开始时间
            self_study: null,//是否晚自习:1=是,2=否',
        }
	},
    checkData(param) {
//      console.log(param)
        if(param.name == ''){
            return { status: 1, msg: {content: '请添写班级名称！', skin: 'msg', time: 2 }}
        }
        return { status: 0, msg: { content: '添加成功！', skin: 'msg', time: 2 }};
	}
  }
}
</script>

<style>
	.switch-btn {position: relative; display: block; vertical-align: middle;margin-top: 0.05rem; width: 0.75rem; /*height: 0.45rem;*/ border-radius: 18px; cursor: pointer;}
	.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
	.text-switch {background-color: #999; border: 1px solid #999; border-radius: inherit; color: #fff; display: block; font-size: 15px; height: 0.35rem; position: relative; text-transform: uppercase;}
	.text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
	.text-switch:before {/*content: attr(data-no);*/ right: 11px;}
	.text-switch:after {/*content: attr(data-yes);*/ left: 11px; color: #FFFFFF; opacity: 0;}
	.checked-switch:checked ~ .text-switch {background-color: #4a79af; border: 1px solid #4a79af;}
	.checked-switch:checked ~ .text-switch:before {opacity: 0;}
	.checked-switch:checked ~ .text-switch:after {opacity: 1;}
	.toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 0.3rem; left: 1px; position: absolute; top: 1px; width: 0.3rem;}
	.toggle-btn::before {color: #aaaaaa; display: inline-block; font-size: 12px; letter-spacing: -2px; padding: 4px 0; vertical-align: middle;}
	.checked-switch:checked ~ .toggle-btn {left: 0.43rem;}
	.text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}
	button.little{
		width: 40%;
		float: left;
		margin-left: 0.5rem;
		padding: 0.15rem;
		background-color: #4a77b0;
		border: none!important;
	    outline: none!important;
	    font-size: 0.3rem;
	}
	button.btn-block{
		margin-top: 0.5rem;
	}
	.btn-block + .btn-block{
		margin-top: 0.5rem;
	}
	.btn:focus{
		background-color: #4a77b0;
		outline: none;
	}
	button.del{
		width: 40%;
		background-color: #f25151;
		border: 1px solid #f25151;
		float: left;
		height: 0.7rem;
		padding: 0;
		margin-left: 0.5rem;
	}
	.del:active{
		background-color: #f25151!important;
		border: 1px solid #f25151!important;
	}
</style>